<!--
 * @Description: 
 * @Author: rendc
 * @Date: 2024-11-04 15:47:25
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-04 16:22:55
-->
<!-- 告诉浏览器 Html的版本是H5 -->
<!DOCTYPE html>
<!-- 语言 English -->
<html lang="en">
<!-- 文档的头部 在网页视口区看不到-->

<head>
  <!-- 信息标签 字符编码格式 -->
  <meta charset="UTF-8">
  <!-- 可使用的宽度为视口宽度 初始缩放比例为1 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 文档的标题 在选项卡上面显示 -->
  <title>摆渡翻译</title>
  <!-- 修改选项卡的图标 -->
  <link rel="icon" href="./img/favicon.png">
  <!-- 样式标签 -->
  <style>
    /* 给标签为table的元素设置样式 */
    table,
    /* 给标签为table的子元素里面的th元素设置样式 */
    table th,
    /* 给标签为table的子元素里面的td元素设置样式 */
    table td{
      /* 设置边框 宽度 1px 线条形状实线 线条颜色 */
      border: 1px solid black;
      /* 表格内边框合并 */
      border-collapse: collapse;
    }
    /* table 选择器 */
    table{
      /* 设置文字的对齐方式 居中 */
      text-align: center;
    }
  </style>
</head>
<!-- 文档的主体 - 在网页的视口区显示的 -->

<body>
  <!-- 表格 -->
  <table>
    <caption>表名</caption>
    <!-- 表头 -->
    <thead>
      <!-- 行 -->
      <tr>
        <!-- 列 -->
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
        <th>数量</th>
      </tr>
    </thead>
    <!-- 表体 -->
    <tbody>
      <!-- 行 -->
      <tr>
        <!-- 列 -->
        <td rowspan="2">11</td>
        <td>12</td>
        <td>13</td>
        <td>2</td>
      </tr>
      <tr>
        <!-- 列 -->
        <!-- <td>21</td> -->
        <td>22</td>
        <td>23</td>
        <td>3</td>
      </tr>
      <tr>
        <!-- 列 -->
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>5</td>
      </tr>
    </tbody>
    <!-- 表脚 -->
    <tfoot>
      <tr>
        <!-- 合并列 colspan 合并行 rowspan-->
        <th colspan="3">总计</th>
        <!-- <th>总计</th>
        <th>总计</th> -->
        <td>10</td>
      </tr>
    </tfoot>
  </table>

</body>
<!-- html的结束标签 -->

</html>